<template>
  <div>
    <div class="m-button">
      <el-button type="primary" @click="getJoke" plain class="get">看笑话</el-button>
      <el-button type="success" @click="getUser" plain class="post">注册</el-button>
    </div>
    <hr>
    <div id="text1">
      <p id="text" v-html="content"></p>
    </div>
  </div>
</template>

<script>
export default {
  name: "Jokes",
  data() {
    return {
      count: 1,
      content: '',
    }
  },
  methods: {
    getJoke() {
      var url1 = "https://autumnfish.cn/api/joke/list";
      this.$axios.get(url1 + "?num=3").then(response=>{
        var jokes = response.data.jokes;
        for (var i = 0; i < jokes.length; i++) {
          this.content += "第" + (this.count++) + "条笑话：" + jokes[i] + "<br>";
        }
        console.log(response);
      }).catch(error=>{
        alert("请求失败");
        console.log(error);
      })
    },
    getUser() {
      var url2 = "https://autumnfish.cn/api/user/reg";
      this.$axios.post(url2, {username: "huangzhixiaiuygng12321"}).then(response=>{
        console.log(response);
        alert(response.data);
      }).catch(error=>{
        console.log(error);
        alert("请求失败");
      })
    }
  }
}
</script>

<style scoped>
.get{
  margin: 5px auto;
  text-align: center;
}
.post{
  margin: 5px auto;
  text-align: center;
}
#text1{
  margin: 0 auto;
  text-align: left;
  max-width: 70em;
  border: 1px mediumpurple solid;
  border-radius: 30px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  background-color: white;
  line-height: 23px;
}
.m-button{
  margin: 0 auto;
  text-align: center;
}
</style>